<template>
  <div :class="['lv-tabs', {'lv-tabs--sticky': sticky}]">
    <div class="lv-tab"
      :class="{'active': curTabIndex === index}"
      v-for="(tab, index) in tabs"
      :key="index"
      @click="handleClick(tab, index)"
    >
      {{ tab }}
    </div>

    <div class="lv-tab__line" :style="lineStyle">
      <span class="lv-tab__line--span"></span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LvTabs',

  props: {
    value: {
      type: Number,
      default: 0
    },

    sticky: {
      type: Boolean,
      default: false
    },

    tabs: {
      type: Array,
      default () {
        return []
      }
    }
  },

  data () {
    return {
      // 当前激活的tab选项卡的下标，默认使用 value 这个 prop
      curTabIndex: this.value
    }
  },

  computed: {
    lineStyle () {
      return {
        transform: `translateX(${this.curTabIndex * 100}%)`
      }
    }
  },

  methods: {
    /**
     * tab 点击
     */
    handleClick (tab, index) {
      // 修改 curTabIndex 来切换高亮
      this.curTabIndex = index
      // 触发一个自定义事件，通知父组件当前选中的tab发生了改变
      this.$emit('input', index)
    }
  }
}
</script>

<style lang="scss">
// 在 style 中使用别名，但是需要在别名的前面加一个 ~ 号。
@import '~@/assets/styles/mixins.scss';

.lv-tabs {
  @include border-bottom;
  display: flex;
  height: 50px;
  background: #fff;
  &--sticky {
    position: sticky;
    top: 0;
    z-index: 999;
  }
  .lv-tab {
    flex: 1;
    line-height: 50px;
    text-align: center;
    &.active {
      color: #ff5f16;
    }
  }
  .lv-tab__line {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    height: 2px;
    transition: transform 0.3s linear;
    &--span {
      width: 66px;
      height: 2px;
      background: #ff5f16
    }
  }
}
</style>
